﻿ <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Web tv retrô</title>
    <style>
        #trans {
            width:400px;
            height:100px;
            background-color:yellow;
            transition:width 2s, font-size 2s, background-color 2s;
            transition-timing-function:ease;
        }
            #trans:hover {
                width:600px;
                height:100px;
                font-size:5em;
                background-color:red;
            }
        #botao {
            font-family:Verdana,Arial;
            width:300px;
            height:40px;
            background-color:blueviolet;
            border-radius:5px;
            transform: translate(60px, 100px) skew(45deg);
        }


        #parent {
        perspective: 700px;
        perspective-origin: -100px -50px;
        }
        #child1 {
        background-color: orange;
        position: absolute;
        transform-origin: 0px 0px;
        transform: rotateY(30deg);
        }
        #child2 {
        background-color: orange;
        position: absolute;
        transform-origin: 0px 0px;
        transform: rotateY(30deg) translate(250px);
        }
    </style>
</head>
<body>
    <div id="trans">trans</div>
    <br />
    Componentes carregdos: <select id="message"></select>
    <br /><br />
    <div>
        <button type="button" id="botao">Click aqui</button>
    </div>
    <br />
    <div id="parent">
        <div id="child1">This is child1</div>
        <div id="child2">This is child2</div>
    </div>

    <script type="text/javascript">
        var div = document.querySelector("#trans");
        div.addEventListener("transitionend", function (e) {
            var message = document.querySelector("#message");
            message.add(new Option(e.propertyName + " time -> " + e.elapsedTime));
            this.innerHTML = "Carregou!!";
        }, false);
    </script>
</body>
</html>
